<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this的指向</title>
  </head>
  <body>
    <!-- 
            ☆ 对象里面没有this，函数作用域中才有this
         -->
    <!-- 
            严格模式：暂时不进行考虑，以后有需要或有运行场景的时候在考虑，在script 标签的最前面添加上 'use strict'
         -->
    <!-- 
            ☆ 注意事项：
               ☆☆ 在开发中【使用箭头函数前需要考虑函数中的this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调
                函数如果里面需要DOM对象的this，则不推荐使用箭头函数
          
               ☆☆ 基于原型的面向对象也不推荐采用箭头函数
                构造函数和原型对象的this都指向实例对象，如果使用箭头函数，那么他的this就会改变（这时是指向window）
            -->

    <!-- 
            普通函数的this指向：
                谁调用函数，函数的this就指向谁
                在严格模式下指向undefined
                普通函数的this就是，谁调用他他的this就指向谁
          -->
    <!-- 
            箭头函数中的this指向：
                其实箭头函数中并不存在this
                ☆ 箭头函数会默认帮我们绑定外层this值，所以在箭头函数中this的值和外层this是一样的
                ☆ 箭头函数中的this引用的就是最近作用域中的this
                ☆ 向外层作用域中，一层一层查找this,直到有this的定义

                不适用：
                    构造函数  原型对象  dom事件函数
                使用：
                    需要使用上层this的地方
           -->

    <script>
      const obj = {
        b: () => {console.log('🚀 ~ This is a result of console.log ~ ✨:== ', this);},
        // 对象的this就是最外层的this ，最外层就是window
        fn: function () {
          console.log('🚀 ~ This is a result of console.log ~ ✨: ', this);
          jiantou = () => {
            console.log(this); // 只要有{}的地方就有一个this的指向
          };
          jiantou();
        },
      };
      obj.fn();
      obj.b()
    </script>
  </body>
</html>
